<template>
  <!-- &nbsp;&nbsp;&nbsp;&nbsp; -->
  <div align="left">
    <h1>{{produce.produceName}}</h1>

    <el-button round size="mini" @click="gotoStore()">去店里看看</el-button>
    <br />
    <br />

    <el-image
      style="width: 250px; height: 250px; border: 1px solid #cccccc; background-color: #bbbbbb"
      :src="curImg"
      :preview-src-list="imgs"
      fit="contain"
    ></el-image>
    <br />

    <el-image
      style="width: 80px; height: 80px; border: 1px solid #cccccc;"
      v-for="(img, i) in imgs"
      :key="img"
      :src="img"
      @click="changeImg(i)"
    ></el-image>

    <div style="border: 1px solid #cccccc;">
      <p style="font-weight: bold;">&nbsp;商品描述</p>
      <p>&nbsp;{{produce.produceDesc}}</p>
    </div>
    <br />

    <span style="font-weight: bold;">库存：</span>
    <span style="font-weight: bold;">{{produce.produceStock}}&nbsp;</span>件
    <br />
    <br />

    <span style="font-weight: bold;">售价：</span>
    <span style="color: #ff0000; font-weight: bold;">{{produce.producePrice}}&nbsp;</span>￥
    <br />
    <br />

    <el-row>
      <el-col :span="4">
        <div style="height: 50px; display:flex;">
          <div style="align-self:center;">
            <el-input-number
              style="width: 170px; "
              v-model="quantity"
              :min="0"
              :max="produce.produceStock"
            ></el-input-number>
          </div>
        </div>
      </el-col>

      <!-- border: 1px solid #cccccc; -->

      <el-col :span="3">
        <div style="height: 50px; display:flex;">
          <span style="margin:auto;">
            <span style="color: #ff0000; font-weight: bold;">{{price}}&nbsp;</span>￥
          </span>
        </div>
      </el-col>

      <el-col :span="3">
        <div style="height: 50px; display:flex;">
          <el-button
            type="warning"
            round
            style="align-self: center;"
            @click="addToShoppingcart()"
          >加入购物车</el-button>
          <el-button
            type="danger"
            round
            style="align-self: center;"
            @click="addToShoppingcartAndBuy()"
          >立即购买</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Produce",
  data() {
    return {
      produce: {},
      store: {},

      curImg: "",
      imgs: [],
      quantity: 0,
      price: 0,
    };
  },
  methods: {
    init(produce) {
      this.produce = produce;
      this.store.storeId = produce.storeId;

      this.imgs = [produce.produceImgs];
      this.curImg = produce.produceImgs;
    },
    changeImg(index) {
      this.curImg = this.imgs[index];
    },
    gotoStore() {
      console.log(this.store.storeId);

      window.open(process.env.STORE_URL + this.store.storeId);
    },
    addToShoppingcart() {
      if (this.quantity == 0) {
        this.$message.warning("请选择数量");
        return;
      }

      var url = process.env.URL_HEAD + "/touser/user/page/check/login";

      this.$http.get(url, { withCredentials: true }).then(
        (response) => {
          if (response.data.status == "ok") {
            var url =
              process.env.URL_HEAD + "/sc/shoppingcart/shoppingcart/save";
            var shoppingcart = {
              userId: response.data.userId,
              produceId: this.produce.produceId,
              produceName: this.produce.produceName,
              producePrice: this.produce.producePrice,
              produceQuantity: this.quantity,
              produceIcon: this.produce.produceIcon,
            };

            this.$http.post(url, shoppingcart).then(
              (response) => {
                if (response.data.msg == "success") {
                  this.$message.success("添加成功！");
                } else {
                  this.$message.error("添加失败");
                }
              },
              (response) => {
                this.$message.error("系统异常，请重试");
              }
            );
          } else {
            this.$message.error("请先登录");
          }
        },
        (response) => {
          this.$message.error("系统异常，请重试");
        }
      );
    },
    addToShoppingcartAndBuy() {
      if (this.quantity == 0) {
        this.$message.warning("请选择数量");
        return;
      }

      var url = process.env.URL_HEAD + "/touser/user/page/check/login";

      this.$http.get(url, { withCredentials: true }).then(
        (response) => {
          if (response.data.status == "ok") {
            var url =
              process.env.URL_HEAD + "/sc/shoppingcart/shoppingcart/save";
            var shoppingcart = {
              userId: response.data.userId,
              produceId: this.produce.produceId,
              produceName: this.produce.produceName,
              producePrice: this.produce.producePrice,
              produceQuantity: this.quantity,
              produceIcon: this.produce.produceIcon,
            };

            this.$http.post(url, shoppingcart).then(
              (response) => {
                if (response.data.msg == "success") {
                  this.$message.success("添加成功！");
                  window.location.href = process.env.SHOPPINGCART_URL;
                } else {
                  this.$message.error("添加失败");
                }
              },
              (response) => {
                this.$message.error("系统异常，请重试");
              }
            );
          } else {
            this.$message.error("请先登录");
          }
        },
        (response) => {
          this.$message.error("系统异常，请重试");
        }
      );
    },
  },
  watch: {
    quantity: function (newVal) {
      this.price = newVal * this.produce.producePrice;
    },
  },
  created() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.abc {
  font-weight: bold;
}
</style>
